<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/doc.min.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div th:replace="~{fragment/header :: head}"></div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <div th:replace="~{fragment/menu :: left}"></div>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <ol class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a th:href="@{/role/list}">数据列表</a></li>
                    <li class="active">分配角色</li>
                </ol>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form role="form" class="form-inline">
                            <div class="form-group">
                                <label for="unassingnRoles">未分配角色列表</label><br>
                                <select class="form-control" multiple size="10" style="width:200px;overflow-y:auto;"
                                    id="unassingnRoles">

                                    <option th:each="role : ${unassignRoles}" th:value="${role.id}"
                                        th:text="${role.roleName}">QC</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <ul>
                                    <li class="btn btn-default glyphicon glyphicon-chevron-right"
                                        onclick="left2right()"></li>
                                    <br>
                                    <li class="btn btn-default glyphicon glyphicon-chevron-left"
                                        style="margin-top:20px;" onclick="right2left()"></li>
                                </ul>
                            </div>
                            <div class="form-group" style="margin-left:40px;">
                                <label for="assignRoles">已分配角色列表</label><br>
                                <select class="form-control" multiple size="10" style="width:200px;overflow-y:auto;"
                                    id="assignRoles">
                                    <option th:each="role : ${assignRoles}" th:value="${role.id}"
                                        th:text="${role.roleName}">QC</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/script/docs.min.js}"></script>
        <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:inline="javascript" type="text/javascript">
        var ctxPath = [[${ application.ctxPath }]]
        const params = new URLSearchParams(window.location.search);
        console.log( params.get("id"))
        $(function () {
            $(".list-group-item").click(function () {
                if ($(this).find("ul")) {
                    $(this).toggleClass("tree-closed");
                    if ($(this).hasClass("tree-closed")) {
                        $("ul", this).hide("fast");
                    } else {
                        $("ul", this).show("fast");
                    }
                }
            });
        });
        function left2right() {
            console.log("left2right");
            var selected =$("#unassingnRoles :selected")
            console.log(selected)
            if (selected.length==0) {
                layer.msg("请选择要分配的角色", { time: 2000, icon: 5, shift: 6 }, function () { });
                return false;
            }
            console.log($("#unassingnRoles").val() || [])
            $.ajax({
                url: ctxPath + "/user/doAssign?userId=" + params.get("id") + "&roleIds=" + $("#unassingnRoles").val().join(","),
                type: "POST",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(data);
                    $("#assignRoles").append(selected)
                },
                error: function (xhr, status, error) {
                     layer.msg(xhr, { time: 2000, icon: 5, shift: 6 }, function () { });
                }
            })
        }
        function right2left() {
            console.log("right2left");
            var selected =$("#assignRoles :selected")
            console.log(selected)
            if (selected.length==0) {
                layer.msg("请选择要取消分配的角色", { time: 2000, icon: 5, shift: 6 }, function () { });
                return false;
            }
            $.ajax({
                url: ctxPath + "/user/doUnassign?userId=" + params.get("id") + "&roleIds=" + $("#assignRoles").val().join(","),
                type: "POST",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(data);
                    $("#unassingnRoles").append(selected)
                },
                error: function (xhr, status, error) {
                     layer.msg(xhr, { time: 2000, icon: 5, shift: 6 }, function () { });
                }
            })

        }
    </script>
</body>

</html>